<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分 
		    .html()          无参---功能：获取匹配元素种第一元素的内容
			                 有参---功能：将匹配元素集合中所有元素替换为新元素
			特点：针对   内容  + 元素
			.val()           午餐---功能：表单内元素：input、select生效
			                            获取表单元素中第一元素的内容
			                 有参---功能：表单内元素：input、select生效
			特点：                        input元素直接显示 value
			                              select元素不是显示value
										  option 元素中内容：用户显示
										  option 元素中value值，必须当前select中
										  必须当前select中，option元素value值
										  直接赋值：打印select元素对象名称[object Object]
			特点：针对  （表单内form元素可以包裹）元素的内容
			
			.text()     无参---功能：获取匹配元素集合中所有元素的文本内容
			            有参---功能：【设置】匹配元素集合中所有元素的文本内容   替换
			特点：元素中存在内容
		-->
		<script src="../js/jquery-1.11.1.js"></script>

	</head>
	<body>
		<button>html()函数</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val()函数-无参</button>
		<input type="text" value="文本框真实的数据1">
		<input type="text" value="文本框真实的数据2" placeholder="输入框显示效果[提示]">
		<!-- html： 按钮 下拉列表  select>option*3 需要加value -->
		<!-- jq：  点击按钮，设置下拉列表的值  | html()与val()有参是否存在区别-->
		<button>按钮-针对html()函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			//  1.找到 类名为  btn1 的钥匙--点击---弹窗内容为 三个 p元素内容
			[无参]
			$(".btn1").click(function() {
				var ptext = $("p").text();
				alert(ptext);
			});

			//  2.找到 类名为  btn2 的钥匙--点击---lorem4\5\6 改成 “修改文本            ”【有参】
			$(".btn2").click(function() {
				$("p").text("修改文本");
			});




			//	$("button").click(function() {
			//设置元素第一个的值  1.直接设置下拉列表中value的值
			//			$("select").val("rem1");
			//设置元素第一个的值  2.给第一个值添加，设置的内容【本身存在】
			//var rem = $("select").val();


			//[object Object] JavaScript中 对象的默认字符串表示心态
			//select元素 对象 输出[object Object]

			//value的值：这是数据  option中值：显示数据
			// object Object  测试：无参
			//	alert("val()函数有参：" + rem);
			//});




			//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
			//	$("button").click(function() {
			/*注意：js变量名不可以为关键字！    in是关键字*/
			//		var ins = $("input").val();
			//		alert("val()函数无参：" + ins);
			//	});







			//有参：点击按钮--下面两个span  改成 lorem3、lorem4
			$("button").click(function() {
				$("span").html("<span>lorem</span>")
			});

			//js变量【int i=1】==jq变量    var 变量名=值、元素
			//无参数      html() 函数使用
			var html = $("span").html();
			//BOM方式 打印数据
			alert("无参数获取第一个元素内容：" + html);
		</script>
	</body>
</html>